<template>
    <div class="flex flex-wrap gap-4">
        <el-card class="w-full" shadow="always">
            <el-text class="font-bold text-4xl">
                Hello，{{ permissionStore.loginUser.realName }}
            </el-text>
            <el-button size="large" class="float-right" type="primary" @click="reset">
                刷新
            </el-button>
        </el-card>
        <el-card class="w-full" shadow="always">
            <el-row>
                <el-col :span="8">
                    <el-card shadow="hover">
                        <el-text>登录时间</el-text>
                        <br/>
                        <el-text>{{ permissionStore.session.startLogin }}</el-text>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                        <el-text>最后访问时间</el-text>
                        <br/>
                        <el-text>{{ permissionStore.session.lastAccess }}</el-text>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                        <el-text>超时时间</el-text>
                        <br/>
                        <el-countdown value-style="font-size: 24px" :value="remainingTime"/>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script setup>
import { computed} from 'vue'
import { usePermissionStore } from '@/stores/permission'

const permissionStore = usePermissionStore()
// 使用计算去定义这个数据，为了使permissionStore.session变化后remainingTime能够同步更新
const remainingTime = computed(() => {
    // console.log(permissionStore.session.lastAccess)
    return Date.parse(permissionStore.session.lastAccess) + permissionStore.session.timeOut
})

const reset = () => {
    permissionStore.getLoginInfo()
}
</script>
<style scoped>
.el-col {
    text-align: center;
}
.el-col .el-text {
    font-size: 24px;
}    
</style>